<template>
  <div class="page-container">
    <el-card class="box-card">
      <el-row style="margin-bottom: 5px">
        <el-input size="small" style="width: 160px" placeholder="请输入账户类型" v-model="params.name" clearable @input="getTableList"/>
        <el-input size="small" style="width: 160px;margin: 0 10px" placeholder="请输入账号" v-model="params.account" clearable @input="getTableList"/>
        <el-button size="small" @click="onReset" icon="ele-Refresh" style="margin: 0 10px 0 20px">重置</el-button>
        <el-button type="primary" size="small" @click="openDialog(null)" icon="ele-CirclePlus">新增账户</el-button>
      </el-row>

      <div class="table-box">
        <el-table :data="tableList" border size="small" class="tableList" :default-sort="{ prop: 'amount'}" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
          <el-table-column prop="name" label="账户类型"/>
          <el-table-column prop="account" label="账号"/>
          <el-table-column prop="initialAmount" label="初始金额"/>
          <el-table-column prop="balance" label="余额" sortable/>
          <el-table-column prop="creator" label="填写人"/>
          <el-table-column prop="createTime" label="新增时间"/>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="openDialog(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="remove(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-block">
          <el-pagination
              v-model:currentPage="params.current"
              v-model:page-size="params.size"
              :page-sizes="[10, 20, 30, 40]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :hide-on-single-page="true"
              @size-change="sizeChange"
              @current-change="getTableList"
          />
        </div>
      </div>
    </el-card>

    <!-- 新增账户 -->
    <el-dialog v-model="accountVisible" title="新增账户" destroy-on-close width="560px">
      <el-form :model="accountForm" :rules="accountRules" size="small" ref="accountFormRef" label-width="110px" class="drawer-form">
        <el-form-item prop="name" label="账户类型">
          <el-input v-model="accountForm.name" placeholder="请填写账户类型" clearable style="width: 250px"/>
        </el-form-item>
        <el-form-item prop="account" label="账号">
          <el-input v-model="accountForm.account" placeholder="请填写账号" style="width: 250px"/>
        </el-form-item>
        <el-form-item prop="initialAmount" label="初始金额">
          <el-input-number v-model="accountForm.initialAmount" :controls="false" :precision="2" style="width: 250px"/>
        </el-form-item>
        <el-form-item prop="balance" label="余额">
          <el-input-number v-model="accountForm.balance" :controls="false" :precision="2" style="width: 250px"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" @click="accountVisible = false">关闭</el-button>
        <el-button size="small" type="primary" :loading="submitLoad" @click="accountSubmit(accountFormRef)">提交</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {reactive, toRefs, ref, onMounted} from 'vue'
import capitalAccountApi from '/@/api/money/capitalAccount'
import {ElMessage, ElMessageBox} from 'element-plus'

export default {
  name: 'AccountManage',
  setup() {
    const accountFormRef = ref()
    const state = reactive({
      accountVisible: false,
      accountForm: {
        id: null,
        name: null,
        account: null,
        initialAmount: 0,
        balance: 0,
        remark: null
      },
      accountRules: {
        name: {required: true, message: '请填写账户类型', trigger: 'blur'},
        account: {required: true, message: '请填写账号', trigger: 'blur'}
      },
      params: {
        current: 1,
        size: 10,
        name: null,
        account: null
      },
      total: 0,
      tableList: [],
      submitLoad: false
    })

    // 获取数据
    const getTableList = () => {
      capitalAccountApi.getPage(state.params).then(res => {
        state.tableList = res.data.records
        state.total = res.data.total
      }).catch(e => console.log(e))
    }
    // 打开新增/编辑框
    const openDialog = (item) => {
      if (item && item.id) {
        state.accountForm = JSON.parse(JSON.stringify(item))
      } else {
        state.accountForm = {
          id: null,
          name: null,
          account: null,
          initialAmount: 0,
          balance: 0,
          remark: null
        }
      }
      state.accountVisible = true
    }
    // 删除
    const remove = (item) => {
      ElMessageBox.confirm('确定删除分类：' + item.name + ' ？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        buttonSize: 'small',
        type: 'warning'
      }).then(() => {
        capitalAccountApi.remove(item).then(res => {
          if (res.data) {
            ElMessage.success('删除成功！')
            getTableList()
          }
        })
      }).catch(() => {
      })
    }
    // 重置
    const onReset = () => {
      state.params = {
        current: 1,
        size: 10,
        name: null,
        account: null
      }
      getTableList()
    }
    // 提交
    const accountSubmit = (formEl) => {
      state.submitLoad = true
      if (state.accountForm.id) {
        capitalAccountApi.edit(state.accountForm).then(res => {
          if (res.data) {
            ElMessage.success('保存成功！')
            getTableList()
            state.accountVisible = false
          }
          state.submitLoad = false
        }).catch(e => {
          console.log(e)
          state.submitLoad = false
        })
      } else {
        try {
          formEl.validate((valid) => {
            if (!valid) return // 必填没有填就直接结束
            capitalAccountApi.create(state.accountForm).then(res => {
              if (res.data) {
                ElMessage.success('保存成功！')
                getTableList()
              }
              state.accountVisible = false
            })
          })
        } catch (e) {
          state.submitLoad = false
          console.log(e)
        }
      }
    }
    const sizeChange = (size) => {
      state.params.size = size
      state.params.current = 1
      getTableList()
    }

    onMounted(() => {
      getTableList()
    })

    return {
      ...toRefs(state),
      accountFormRef,
      getTableList,
      sizeChange,
      openDialog,
      onReset,
      accountSubmit,
      remove
    }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

  }

  .box-card .select span {
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    margin-right: 10px;
  }
}
</style>
